<template>
  <div style="font-size:0.9rem;background:#f1f1f1;min-height:85vh">
    <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam"></navTop>
    <section class="section_status" :class="{'changeBgToBlue' : ('changeBgToBlue'==changeBg), 'changeBgToRed' : ('changeBgToRed'==changeBg)}">
      <div class="section_top">
        <p>{{orderStatusInfo}}</p>
        <p>{{orderStatusNotice}}</p>
      </div>
    </section>
    <section class="section_con" style="background:#f1f1f1">
      <div>
        <p>快递名称：{{kdmc}}</p>
        <p>快递单号：{{kdno}}</p>
      </div>
      <nuxt-link :to="{path:'/chufang/checkExpressInfo',query:{kdmc:this.kdmc,kdno:this.kdno,kdmcvalue:this.kdmcvalue,}}" class="section_con1" v-if="this.orderstatus=='4'" tag="div">
        最新物流信息：<p style="min-height:2rem;word-wrap:break-word;font-size:0.9rem;">{{wuliu1[0].ftime}}{{wuliu1[0].context}}</p>
      </nuxt-link>

      <nuxt-link :to="{path:'/chufang/checkExpressInfo',query:{kdmc:this.kdmc,kdno:this.kdno,kdmcvalue:this.kdmcvalue,}}" class="section_con1" v-if="this.orderstatus=='5'" tag="div">
        最新物流信息：<p style="min-height:2rem;word-wrap:break-word;font-size:0.9rem;">{{wuliu1[0].ftime}}{{wuliu1[0].context}}</p>
      </nuxt-link>
      <div class="section_con2">
        <p>医生：{{doctorname}}</p>
        <!--         <p>药房名称：{{$route.query.yaofangname}}</p>
        <p>药房地址：{{$route.query.yaofangadr}}</p>
        <p>药房电话：{{$route.query.yaofangphone}}</p> -->
      </div>
      <div class="section_con3">
        <p>收药人：{{syr}}</p>
        <p>收药地址：{{shadr}}</p>
        <p>电话：{{syrdh}}</p>
      </div>

      <!-- <div class="section_con4">
        <p>患者留言：{{$route.query.leavemes}}</p>
      </div> -->
      <!--     隐藏的药方药品明细
      <div class="section_con5" v-if="this.$route.query.oprlb
      =='1'"
      >
        <table>
          <thead>
            <tr>
              <th style="width:90%;font-size:0.9rem">品名（规格）</th>
              <th style="width:25%;font-size:0.9rem;text-align:right">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in draglist" :key="item.id">
              <td>{{item.split('#')[1]}}</td>
              <td>{{item.split('#')[2]}}={{item.split('#')[3]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="section_con5" v-else>
        <table>
          <thead>
            <tr>
              <th style="width:77%;font-size:0.9rem">品名（规格）</th>
              <th style="width:13%;font-size:0.9rem">数量</th>
              <th style="width:15%;font-size:0.9rem;text-align:right">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in draglist" :key="item.id">
              <td>{{item.split('#')[1]}}</td>
              <td>{{item.split('#')[2]}}</td>
              <td>{{item.split('#')[2]}}={{item.split('#')[3]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
 -->
      <div class="section_con6">
        <p>医嘱：{{acsm}}</p>
        <!-- <p class="chooseServer">附加服务：
          <input type="checkbox" id="psf" value="配送费" v-model="$route.query.psf"
            disabled
          >
          <label for="psf">配送费</label>
          <input type="checkbox" id="jgf" value="加工费" v-model="$route.query.jgf"
            disabled
          >
          <label for="jgf">加工费</label>
        </p> -->
      </div>
      <div class="section_bot" v-if="this.orderstatus=='4'||'5'" style="background:#f1f1f1">
        <p>订单编号：{{ordercode}}</p>
        <p>下单时间：{{time}}</p>
        <p>付款时间：{{fktime}}</p>
        <p>发货时间：{{delivertime}}</p>
      </div>
      <div class="section_con7">
        <!-- <p>
          <span>加工费：{{$route.query.jgf}}元</span>
          <span style="float:right">药品：{{$route.query.yff}}元</span>
        </p> -->
        <p>
          <!-- <span>配送费：{{$route.query.psf}}元</span> -->
          <!-- 带有多种价格的混合模式 -->
          <!-- <span>金额：{{Number($route.query.jgf)+Number($route.query.yff)+Number($route.query.psf)}}元</span> -->
          <!-- <span style="float:right;color:#f60">已付款：{{Number($route.query.jgf)+Number($route.query.yff)+Number($route.query.psf)}}元</span> -->

          <span>金额：{{Number(jeyf)}}元</span>
          <span style="float:right;color:#f60">已付款：{{Number(jeyf)}}元</span>
        </p>
      </div>
    </section>
  </div>
</template>
<script scoped>
import navTop from '~/components/common/navTop';
import axios from 'axios';

const { config } = window;

export default {
  data() {
    return {
      // 传递的参数
      param: '',

      // 新增数据
      kdmc: '',
      kdno: '',
      kdmcvalue: '',
      orderstatus: '',
      doctorname: '',
      syr: '', // 收药人
      shadr: '', // 收药地址
      syrdh: '', // 收药人电话
      acsm: '', // 遗嘱
      ordercode: '', // 订单编号
      time: '', // 下单时间
      fktime: '', // 付款时间
      delivertime: '', // 发货时间
      jeyf: '',

      // 原有数据
      showBack: true,
      bkParam: 'bk',
      headTitle: '药方订单详情',
      orderStatusInfo: 'info',
      orderStatusNotice: 'notice',
      backGround_color: '',
      changeBg: 'changeBgToGreen',
      prescribeInfo: '',
      draglist: '', // this.$route.query.draglist.split(','),
      prescribe: {},
      durgsList2: [],
      wuliu1: [{}],
      ftime: '',
      context: '',
      orderStatusList: [
        {
          statusNum: '0',
          orderStatusInfo: '未付款',
          orderStatusNotice: '请支付',
          backGround_color: 'changeBgToRed',
        },
        {
          statusNum: '3',
          orderStatusInfo: '已付款',
          orderStatusNotice: '待发货',
          backGround_color: 'changeBgToBlue',
        },
        {
          statusNum: '4',
          orderStatusInfo: '已付款',
          orderStatusNotice: '待收货',
          backGround_color: 'changeBgToBlue',
        },
        {
          statusNum: '5',
          orderStatusInfo: '已付款',
          orderStatusNotice: '已确认收货',
          backGround_color: 'changeBgToBlue',
        },
      ],
    };
  },
  components: {
    navTop,
  },
  created() {
    this.param = `${this.$route.query.pm}`;
    this.getPrescribeOrder();
  },
  destroyed() {
    this.$root.showfooter = true;
  },
  methods: {
    getwuliuMes() {
      axios
        .get(`http://${config.APIRoot}:3009/query`, {
          params: {
            type: this.$route.query.kdmcvalue,
            postid: this.$route.query.kdno,
          },
        })
        .then((response) => {
          this.wuliu1 = response.data.data;
          console.log(`========================物流信息：${JSON.stringify(this.wuliu1)}`);
          // this.ftime = response.data.data[0].ftime;
          // this.context = response.data.data[0].context;
          for (let i = 0; i < 1; i += 1) {
            this.ftime = this.wuliu1[i].ftime;
            this.context = this.wuliu1[i].context;
          }
          console.log(`wuliu1[0].ftime: ${this.ftime}`);
          console.log(`wuliu1[0].ftime: ${this.context}`);
        });
    },
    getPrescribeOrder() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.07.05',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: {
            ordstatus: '',
            keywords: this.param,
            rowsperpage: '10',
            page: '1',
            ordercolumn: 'openDate',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        //
        const list = ts.d.DATAOBJ.DATA;
        this.kdmc = list[0].kdmc;
        this.kdno = list[0].kdno;
        this.kdmcvalue = list[0].kdmcvalue;
        this.orderstatus = list[0].orderstatus;
        this.doctorname = list[0].doctorname;
        this.syr = list[0].syr;
        this.shadr = list[0].shadr;
        this.syrdh = list[0].syrdh;
        this.acsm = list[0].acsm;
        this.ordercode = list[0].ordercode;
        this.time = list[0].time;
        this.fktime = list[0].fktime;
        this.delivertime = list[0].delivertime;
        this.jeyf = list[0].jeyf;

        //
        this.getwuliuMes();
      });
    },
  },
};

</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.chooseServer input{
  margin-left: 2rem;
}
.select2 p{
  font-size: 0.9rem;
  line-height: 1rem;
  padding-top: 0.5rem;
}
.section_status {
  margin-top: 2.5rem;
  height: 4rem;
}
.select select {
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #ddd;
  padding: 0.4rem;
  width: 70%;
  overflow: auto;
  margin: 0;
}
.select option {
  background: #fff;
  border: none;
}
.section_top p {
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  font-family: "微软雅黑";
  margin: 0;
  padding-top: 0.8rem;
}
.section_top p:last-child {
  font-size: 1rem;
  font-family: "微软雅黑";
  padding: 0;
}
.section_con1 {
  background: #e7e1a8;
  width: 100%;
}
.section_con p {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-family: "微软雅黑";
}
.section_con div {
  margin-top: 0.5rem;
  background: #fff;
  padding: 0.5rem;
}
.section_con div:first-child {
  margin-top: 0;
}
.section_con1 span:last-child {
  float: right;
  padding-right: 1rem;
}
.section_con2 span {
  float: right;
  padding-right: 1rem;
  font-size: 0.8rem;
}
.section_con4 input {
  border: none;
  outline: none;
  width: 75%;
  padding: 0.3rem 0;
}
.section_con5 ul {
  margin: 0;
  padding-left: 1rem;
  width: 100%;
  height: 5rem;
}
.section_con5 ul li {
  list-style: none;
  font-size: 0.9rem;
  margin-bottom: 0;
  color: #333;
  font-family: "微软雅黑";
  float: left;
  margin: 0.2rem 0.5rem;
}
.section_bot {
  background: #fff;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  position: fixed;
  bottom: 0;
  width: 100%
}
.section_bot p {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-family: "微软雅黑";
  padding: 0.5rem 1rem;
}
.section_bot span:nth-child(2) {
  float: right;
  color: #f60;
}
.section_bot .pay {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #3190e8;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}
.section_bot .pay1 {
  width: 100%;
  padding: 8px;
  background-color:#ccc;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.2rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  font-weight: 700;
}
.section_con7{
  min-height: 3rem;
  max-height: 5rem;
}
.changeBgToGreen {
  background-color: rgb(196, 123, 40);
}
.changeBgToBlue {
  background-color: rgb(224, 168, 62);
}
.changeBgToRed {
  background-color: rgb(236, 79, 79);
}
</style>

